<template>
  <header-nav ref="headerRef" :count="count" @set-count="setCount" />
  <div>
    <h3>我是首页 -- {{ count }}</h3>
    <div ref="titleRef">我是一个内容</div>
    <button @click="getTitleDom">获取dom数据ref</button>
  </div>
</template>
<script setup lang="ts">
// ref如果声明的是一个基础类型可以不指定类型，如果是引用类型则一定要指定
import { ref } from 'vue'
import headerNav from './ui/headerNav.vue'

// 基础类型，可以声明类型也可以不去声明
// const count = ref<number>(100)
const count = ref(100)
// 引用类型要指定
const users = ref<IApi.IUser[]>([])
// const user = ref<IApi.IUser>({} as IApi.IUser)
const user = ref<IApi.IUser>(null!)
// ref获取dom对象
const titleRef = ref<HTMLDivElement>(null!)
// 绑定自定义组件，得到它的组件类型 typeof keyof infer
const headerRef = ref<InstanceType<typeof headerNav>>(null!)

const getTitleDom = () => {
  // console.log(titleRef.value.innerHTML)
  console.log(headerRef.value.setName(Date.now() + ''))
}

const setCount = (n: number) => {
  count.value += n
}
</script>
<style lang="scss" scoped></style>
